<template>
  <div v-if="checkPermission(['super'])" v-loading="loading">
  <div class="login-container">
    <el-button size="mini" style="margin-left: 14px;" @click="setStatus(1)" type="success">启用</el-button>
<!--    <el-button size="mini" style="margin-left: 14px;" @click="setStatus(0)" type="danger">禁用</el-button>-->
    <el-table
      :data="list"
      element-loading-text="Loading"
      stripe
      border
      fit
      style="font-size: 12px"
      @selection-change="handleSelectionChange"
      :cell-style="{padding:'2px 0',borderBottom: 'none' & '!important',borderRight:'none' & '!important'}"
      :header-cell-style="{background:'#F5F7FA',color:'#606266', height:'30px', padding:'5px',textAlign:'left'}"
    >
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column min-width="10%" label="学号">
        <template slot-scope="scope">
          {{scope.row.studentId}}
        </template>
      </el-table-column>
      <el-table-column min-width="10%" label="状态">
        <template slot-scope="scope">
          {{scope.row.status==0?'禁用':'启用'}}
        </template>
      </el-table-column>

      <el-table-column min-width="10%" label="注册日期">
        <template slot-scope="scope">
          {{scope.row.registerDate}}
        </template>
      </el-table-column>

    </el-table>
  </div>
  </div>
</template>
<script>
import * as api from "@/api/admin";
import checkPermission from '@/utils/permission' // 权限判断函数
export default {
  name: 'admin',
  components: {  },
  data() {
    return {
      selected:[],
      list:[]
    }
  },
  watch: {
    $route: {
      handler: function(route) {
        const query = route.query
        if (query) {
          this.redirect = query.redirect
          this.otherQuery = this.getOtherQuery(query)
        }
      },
      immediate: true
    }
  },
  created() {
    // window.addEventListener('storage', this.afterQRScan)
  },
  mounted() {
    this.loadList()
  },
  destroyed() {
    // window.removeEventListener('storage', this.afterQRScan)
  },
  methods: {
    checkPermission,
    loadList(){
      api.fetchList({status:0}).then(box=>{
        this.list=box
      })
    },
    setStatus(status){
      if (this.selected.length==0){
        this.$message.warning('请选择')
      }else{
        api.updateStatus({
          status:status,
          ids:this.selected.map((a,b,c)=>{
            return a.uid
          })
        }).then((box)=>{
          this.loadList()
          this.$message.success('修改成功')
        }).catch((err)=>{
          this.$message.error(err.message)
        })
      }
    },
    handleSelectionChange(selected){
      this.selected=selected
    },
    checkCapslock(e) {
      const { key } = e
      this.capsTooltip = key && key.length === 1 && (key >= 'A' && key <= 'Z')
    },
    showPwd() {
      if (this.passwordType === 'password') {
        this.passwordType = ''
      } else {
        this.passwordType = 'password'
      }
      this.$nextTick(() => {
        this.$refs.password.focus()
      })
    },
    handleLogin() {

      this.$refs.loginForm.validate(valid => {
        if (valid) {
          this.loading = true
          this.$store.dispatch('user/login', this.loginForm)
            .then(() => {
              this.$router.push({ path: this.redirect || '/', query: this.otherQuery })
              this.loading = false
            })
            .catch((err) => {
              this.$message.error(err.message)
              this.loading = false
            })
        } else {
          console.log('error submit!!')
          return false
        }
      })

    },
    getOtherQuery(query) {
      return Object.keys(query).reduce((acc, cur) => {
        if (cur !== 'redirect') {
          acc[cur] = query[cur]
        }
        return acc
      }, {})
    }
    // afterQRScan() {
    //   if (e.key === 'x-admin-oauth-code') {
    //     const code = getQueryObject(e.newValue)
    //     const codeMap = {
    //       wechat: 'code',
    //       tencent: 'code'
    //     }
    //     const type = codeMap[this.auth_type]
    //     const codeName = code[type]
    //     if (codeName) {
    //       this.$store.dispatch('LoginByThirdparty', codeName).then(() => {
    //         this.$router.push({ path: this.redirect || '/' })
    //       })
    //     } else {
    //       alert('第三方登录失败')
    //     }
    //   }
    // }
  }
}
</script>
